/* You can add global styles to this file, and also import other style files */
* {
  box-sizing: border-box;
}

@black        : #1f1f1f;
@light-black  : #333854;
@lightest-grey: #dfe1e6;
@light-grey   : #adb0b8;
@darker-grey  : #8c8c8c;

.flex-space-between {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
}

.flex-end {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
}

.flex-center {
  display        : flex;
  justify-content: center;
  align-items    : center;
}

.ellipsis {
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
}

.icon {
  height           : 16px;
  width            : 16px;
  display          : inline-block;
  background-size  : contain;
  background-repeat: no-repeat;
}


.icon-undo-customed{
  .icon();
  background-image: url("./assets/undo.svg");
}

.icon-undo-disabled{
  .icon();
  background-image: url("./assets/undo_disabled.svg");
}

.icon-redo-customed{
  .icon();
  background-image: url("./assets/redo.svg");
}

.icon-redo-disabled{
  .icon();
  background-image: url("./assets/redo_disabled.svg");
}

.icon-zoom-in-customed{
  .icon();
  background-image: url("./assets/zoom-in.svg");
}

.icon-zoom-out-customed{
  .icon();
  background-image: url("./assets/zoom-out.svg");
}

.icon-zoom-reset{
  .icon();
  background-image: url("./assets/zoom-reset.svg");
}

.icon-zoom-out-map{
  .icon();
  background-image: url("./assets/zoom-out-map.svg");
}

.icon-switch-customed{
  .icon();
  background-image: url("./assets/switch.svg");
}

.icon-run-graph{
  .icon();
  background-image: url("./assets/run-graph.svg");
}

.icon-stop-customed{
  .icon();
  background-image: url("./assets/stop.svg");
}

.icon-restart-customed{
  .icon();
  background-image: url("./assets/restart.svg");
}

.enable-click:hover{
  cursor:pointer;
}
